---
title: Line Chart Widget
description: Learn how to use the Line Chart Widget in OpenLIT to plot precise time series metrics using ClickHouse queries and dynamic bindings.
---

The **Line Chart Widget** in OpenLIT helps you visualize changes in your metrics over time with sharp, precise lines. It’s ideal for tracking KPIs like API latency, CPU usage, conversion rate, or funnel performance.

---

## 📌 When to Use

Use a Line Chart when you want to:

- Monitor trends over time with a high degree of accuracy  
- Display sharp, distinct movements in your data  
- Compare multiple metrics on the same time scale  

---

## 🛠️ How to Add a Line Chart

<iframe className="w-full aspect-video" src="https://www.youtube.com/embed/O8vrdaGb8bw?list=PLgErWFh-dyiGp9yUDnnx67wHEeNqzzMXZ" title="How to Use the Line Chart Widget in OpenLIT – Visualize Trends Over Time" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Example:

```sql
WITH
	parseDateTimeBestEffort('{{filter.timeLimit.start}}') AS start_time,
	parseDateTimeBestEffort('{{filter.timeLimit.end}}') AS end_time,
	dateDiff('day', start_time, end_time) AS days_diff,
	dateDiff('year', start_time, end_time) AS years_diff,
	multiIf(
	    years_diff >= 1, 'month',
	    days_diff <= 1, 'hour',
	    'day'
	) AS date_granularity
	SELECT
		CAST(COUNT(*) AS INTEGER) AS total,
		formatDateTime(DATE_TRUNC(date_granularity, Timestamp), '%Y/%m/%d %R') AS request_time
	FROM otel_traces
	WHERE
	SpanAttributes['gen_ai.operation.name'] != 'vectordb'
	AND StatusCode IN ('STATUS_CODE_OK', 'STATUS_CODE_UNSET', 'Ok', 'Unset')
	AND Timestamp >= start_time AND Timestamp <= end_time
	GROUP BY request_time
	ORDER BY request_time
````

---

## ⚙️ Customization Options

* **Custom line colors
* **X/Y label and value paths**

<Tip>
Use dynamic bindings like `{{filter.timeLimit.start}}`, `{{filter.timeLimit.end}}` to make your chart respond to dashboard time filters.
</Tip>

---

## ✅ Best Practices

* Use `GROUP BY` with consistent time buckets (e.g., minute, hour)
* Order your results by time to ensure correct rendering

---

## 🔗 Related Guides

* [Area Chart Widget →](/latest/features/dashboards/widgets/area-chart-widget)
* [Bar Chart Widget →](/latest/features/dashboards/widgets/bar-chart-widget)
* [Markdown Widget →](/latest/features/dashboards/widgets/markdown-widget)
* [Pie Chart Widget →](/latest/features/dashboards/widgets/pie-chart-widget)
* [Stat Widget →](/latest/features/dashboards/widgets/stat-widget)
* [Table Widget →](/latest/features/dashboards/widgets/table-widget)